<template>
	<view class="p_bg_all">
		<view class="my_top p_lr_32" :style="'padding-top:' + allHeight + 'px;padding-right:0;'">
			<view class="my_top_bg"></view>
			<view class="p_rel p_over p_margin_t_32">
				<view class="p_flex2">
					<button plain open-type="chooseAvatar" style="padding: 0;" class="p_margin_r_32" v-if="!avatarImage"
						@chooseavatar="onChooseAvatar">
						<image src="https://dy.sykj365.com/uploads/mini/touxiang@2x.png" mode="aspectFill" class="p_photo_128">
					</button>
					<image :src="avatarImage" mode="aspectFill" class="p_photo_128 p_margin_r_32" v-else></image>
					<view class="p_flex_1">
						<view class="p_font_36" v-if="nickname">{{nickname}}</view>
						<input type="nickname" placeholder="请输入昵称" placeholder-class="p_font_36 p_color_b2"
							class="p_font_36" :value="nickname" v-else @blur="onInput" />
						<view class="p_font_24 p_margin_t_8 p_color_7a">用户ID：{{userId}}</view>
					</view>
				</view>
				<view class="p_font_28 p_color_7a p_margin_t_40">可用余额</view>
				<view class="p_flex2 p_margin_b_74">
					<view class="p_font_48 p_margin_r_16">
						<text class="p_font_32">¥</text>{{balance}}
					</view>
					<view class="p_font_24 p_color_05b570 p_flex7 top_btn"
						@click="getLink('/pages/my/account?balance=' + balance)">明细
					</view>
					<view class="p_flex10 p_flex_1">
						<view class="withdraw_btn" @click="getLink('/pages/my/withdrawRecords')">提现</view>
					</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="p_flex9 b_top">
				<view class="p_font_28">我的订单</view>
				<view class="p_flex2" @click="getLink('/pages/my/order?type=0')">
					<view class="p_font_24 p_color_7a">全部订单</view>
					<image src="https://dy.sykj365.com/uploads/mini/youjiantou@2x.png" mode="aspectFill" class="p_img_48"></image>
				</view>
			</view>
			<view class="p_flex center_main">
				<view class="p_flex_1 p_flex8 p_margin_tb_32" v-for="(item, index) in orderList" :key="index"
					@click="getLink(item.links)">
					<view class="p_rel p_img_64">
						<image :src="item.icon" mode="aspectFill" class="p_full"></image>
						<view class="quan" v-if="index == 0 && payNum != 0">{{payNum}}</view>
						<view class="quan" v-if="index == 1 && printNum != 0">{{printNum}}</view>
						<view class="quan" v-if="index == 2 && receivedNum != 0">{{receivedNum}}</view>
						<view class="quan" v-if="index == 3 && completeNum != 0">{{completeNum}}</view>
						<view class="quan" v-if="index == 4 && refundNum != 0">{{refundNum}}</view>
					</view>
					<view class="p_font_26 p_margin_t_8">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="zhongcao_container" @click="getLink('/pages/my/grassPlantingActivity')">
			<image src="https://dy.sykj365.com/uploads/mini/xiaohongshu@2x.png" class="zhongcao_image"></image>
		</view>
		<view class="center gongneng p_over">
			<view class="p_font_32 p_margin_t_32 p_margin_l_30">常用功能</view>
			<view class="p_flex3">
				<view class="p_flex8 gn_btn" :class="item.className" v-for="(item, index) in functList" :key="index"
					@click="getLink(item.links)">
					<image :src="item.icon" mode="aspectFill" class="p_img_64"
						:class="{'active': index == 8 || index == 9 || index == 11}"></image>
					<view class="p_font_26 p_margin_t_16">{{item.title}}</view>
				</view>
				<view v-if="scan == 1" class="p_flex8 gn_btn" :class="item.className" v-for="(item, index) in codeList"
					:key="index" @click="getLink(item.links)">
					<image :src="item.icon" mode="aspectFill" class="p_img_64" :class="{'active': index == 0}"></image>
					<view class="p_font_26 p_margin_t_16">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tops: 0, // 顶部信息显示高度
				barHeight: 0, // 顶部右侧圆圈高度
				allHeight: 0, // 总高度
				functList: [{
						icon: 'https://dy.sykj365.com/uploads/mini/shoucang@2x.png',
						title: '我的收藏',
						links: '/pages/my/collect',
						className: 'p_margin_tb_48'
					}, {
						icon: 'https://dy.sykj365.com/uploads/mini/dizhi@2x.png',
						title: '收货地址',
						links: '/pages/my/address',
						className: 'p_margin_tb_48'
					}, 
     //      {
					// 	icon: 'https://dy.sykj365.com/uploads/mini/jiage@2x.png',
					// 	title: '价格列表',
					// 	links: '/pages/my/price',
					// 	className: 'p_margin_tb_48'
					// }, 
          {
						icon: 'https://dy.sykj365.com/uploads/mini/fapiao@2x.png',
						title: '开发票',
						links: '/pages/my/invoice',
						className: 'p_margin_tb_48'
					}, {
						icon: 'https://dy.sykj365.com/uploads/mini/youhuiquan@2x.png',
						title: '优惠券',
						links: '/pages/my/coupon',
						// className: 'p_margin_b_32'
						className: 'p_margin_tb_48'
					}, {
							icon: 'https://dy.sykj365.com/uploads/mini/daili@2x.png',
							title: '折扣券',
							links: '/pages/my/coupon?ticket_type=1',
							className: 'p_margin_b_32'
						}, {
						icon: 'https://dy.sykj365.com/uploads/mini/wenti@2x.png',
						title: '常见问题',
						links: '/pages/my/issue',
						className: 'p_margin_b_32'
					}, {
						icon: 'https://dy.sykj365.com/uploads/mini/jianyi@2x.png',
						title: '建议反馈',
						links: '/pages/my/refund?type=2',
						className: 'p_margin_b_32'
					}, {
						icon: 'https://dy.sykj365.com/uploads/mini/fenxiangicon.png',
						title: '分享清单',
						links: '/pages/my/shareList',
						className: 'p_margin_b_32'
					}, {
						icon: 'https://dy.sykj365.com/uploads/mini/fenxiangxiadn.png',
						title: '分享下单记录',
						links: '/pages/my/shareOrderList',
						className: 'p_margin_b_32'
					}, {
						icon: 'https://dy.sykj365.com/uploads/mini/yinsi.png',
						title: '隐私条款',
						links: '/pages/my/clause',
						className: 'p_margin_b_32'
					}, {
						icon: 'https://dy.sykj365.com/uploads/mini/protocol.png',
						title: '申请协议',
						links: '/pages/my/protocal',
						className: 'p_margin_b_32'
					},
				],
				orderList: [{
					icon: 'https://dy.sykj365.com/uploads/mini/daifukuan@2x.png',
					title: '待付款',
					links: '/pages/my/order?type=1',
				}, {
					icon: 'https://dy.sykj365.com/uploads/mini/daidayin@2x.png',
					title: '待打印',
					links: '/pages/my/order?type=2',
				}, {
					icon: 'https://dy.sykj365.com/uploads/mini/daishouhuo@2x.png',
					title: '待收货',
					links: '/pages/my/order?type=3',
				}, {
					icon: 'https://dy.sykj365.com/uploads/mini/yiwancheng@2x.png',
					title: '已完成',
					links: '/pages/my/order?type=4',
				}, {
					icon: 'https://dy.sykj365.com/uploads/mini/shouhou@2x.png',
					title: '退款/售后',
					links: '/pages/my/order?type=5',
				}],
				codeList: [{
					icon: 'https://dy.sykj365.com/uploads/mini/saoyisao.png',
					title: '扫一扫',
					className: 'p_margin_b_32'
				}],
				avatarImage: '',
				avatarImageUp: '',
				nickname: '',
				imgHost: this.$api.yuming,
				balance: '0',
				payNum: 0,
				printNum: 0,
				receivedNum: 0,
				completeNum: 0,
				refundNum: 0,
				userId: '',
				scan: '',
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.barHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.allHeight = this.tops + this.barHeight;
				}
			})
		},
		onLoad() {

		},
		onShow() {
			if (uni.getStorageSync('openid')) {
				this.getUserinfo();
			}

			if (!uni.getStorageSync('openid')) {
				getApp().getUserLogin();
			}
		},
		methods: {
			getUserinfo() {
				this.$http.post(this.$api.userinfo).then(res => {
					this.avatarImage = res.data.avatar_image;
					this.nickname = res.data.nickname;
					this.balance = res.data.balance ? res.data.balance : 0;
					this.payNum = res.data.pay_num;
					this.printNum = res.data.print_num;
					this.receivedNum = res.data.received_num;
					this.completeNum = res.data.complete_num;
					this.refundNum = res.data.refund_num;
					this.userId = res.data.id;
					this.scan = res.data.scan;
				})
			},
			getLink(e) {
				if (e) {
					getApp().getNavigateTo(e);
				} else {
					uni.scanCode({
						scanType: ['barCode'],
						success: function(res) {
							getApp().getNavigateTo('/pages/my/code?express_num=' + res.result);
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				}
			},
			onChooseAvatar(e) {
				let self = this;
				uni.uploadFile({
					url: self.$api.upload,
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						let result = JSON.parse(uploadFileRes.data);

						if (result.code === 20000) {
							self.avatarImage = self.imgHost + result.data.url;
							self.avatarImageUp = result.data.url;
							if (self.avatarImage) {
								self.getUserInfo();
							}
						} else {
							getApp().getMsg(result.msg);
						}
					}
				});
			},
			onInput(e) {
				this.nickname = e.detail.value;
				if (this.nickname) {
					this.getUserInfo();
				}
			},
			getUserInfo() {
				this.$http.post(this.$api.editUser, {
					avatar_image: this.avatarImageUp,
					nickname: this.nickname
				}).then(res => {
					getApp().getMsg('授权成功', 'success')
				})
			},
			userWithdrawal() {
				uni.showLoading();
				this.$http.post(this.$api.userWithdrawal,{
					price: 0.01
				}).then(res => {
					if(res.code === 20000){
						uni.hideLoading();
						this.getUserinfo();
						getApp().getMsg(res.msg);
					}
				})
			},

		}
	}
</script>

<style lang="less">
	.my_top {
		position: relative;
	}

	.my_top_bg {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		filter: blur(73rpx);
		background: linear-gradient(48deg, rgba(5, 181, 112, 0.26) 0%, rgba(42, 245, 99, 0.19) 52%, rgba(24, 186, 255, 0.26) 86%);
	}

	.top_btn {
		width: 88rpx;
		height: 42rpx;
		border-radius: 60rpx;
		border: 1px solid #05B570;
		box-sizing: border-box;
	}

	.b_top {
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #ECECEC;
	}

	.withdraw_btn {
		width: 139rpx;
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 26rpx;
		line-height: 60rpx;
		height: 60rpx;
		border-radius: 30rpx 0 0 30rpx;
		background-color: #05B570 !important;
	}

	.center {
		margin: -26rpx 32rpx 0;
		border-radius: 16rpx;
		background-color: #fff;
		position: relative;

		&.gongneng {
			margin: 32rpx;
		}
	}

	.zhongcao_container {
		margin: 32rpx 32rpx -52rpx 32rpx;
		.zhongcao_image {
			width: 100%;
			height: 262rpx;
		}
	}

	.center_main {
		padding: 0 0 16rpx;
	}

	.quan {
		color: #fff;
		text-align: center;
		min-width: 20rpx;
		font-size: 20rpx;
		line-height: 32rpx;
		padding: 0 6rpx;
		border-radius: 40rpx;
		background-color: #FF5555;
		position: absolute;
		top: 0;
		right: -4rpx;
	}

	.gn_btn {
		flex: 0 25%;

		image {
			&.active {
				width: 48rpx;
				height: 48rpx;
				padding: 8rpx;
			}
		}
	}
</style>
